<template>
  <div class="export_goods_excel_mobile_wrap">
    <div class="nav_box">
      <van-nav-bar title="导出货品" left-text="返回" left-arrow @click-left="returnClick" />
    </div>

    <div class="export_table_form_box">
      <div class="form_box">
        <van-field
          v-model="labAddress"
          label="实验室地址"
          label-align="right"
          placeholder="请输入实验室地址"
          is-link
          readonly
          @click="isShowLabAddressPicker = true"
        />
        <!-- 实验室地址选择器 -->
        <van-popup v-model:show="isShowLabAddressPicker" position="bottom">
          <van-picker :columns="labAddressColumns" @confirm="labAddressPickerConfirm" @cancel="isShowLabAddressPicker = false" />
        </van-popup>
        <van-field v-model="code" label="药品柜" label-align="right" placeholder="请输入药品柜" />
        <van-field
          v-model="categoryName"
          label="类别"
          label-align="right"
          placeholder="请输入类别"
          is-link
          readonly
          @click="isShowCategoryPicker = true"
        />
        <!-- 类别选择器 -->
        <van-popup v-model:show="isShowCategoryPicker" position="bottom">
          <van-picker :columns="categoryColumns" @confirm="categoryPickerConfirm" @cancel="isShowCategoryPicker = false" />
        </van-popup>

        <van-field v-model="subjectName" label="科目" label-align="right" placeholder="请输入科目" />
        <van-field v-model="projectName" label="项目" label-align="right" placeholder="请输入项目" />
      </div>

      <div class="action_btn_box">
        <van-button class="export_btn" type="primary" @click="exportExcelFunc">导出</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
import { showToast } from "vant";
export default defineComponent({
  name: "ExportGoodsExcelMobile"
});
</script>
<script setup>
import { useRouter } from "vue-router";
import FileSaver from "file-saver";
import { selectCategoryListApi, selectLaboratoryListApi, exportExcelApi } from "@/api/modules/goods/index";

const router = useRouter();

// 显示实验室地址选择器的标识
const isShowLabAddressPicker = ref(false);

// 显示类别选择器的标识
const isShowCategoryPicker = ref(false);

// 类别选择器数据
const categoryColumns = ref([]);

// 实验室地址选择器数据
const labAddressColumns = ref([]);

// 导出提交表单数据
// const exportSubmitFormData = ref({
//   labAddress: "",
//   code: "",
//   categoryName: "",
//   subjectName: "",
//   projectName
// });

//  实验室地址
const labAddress = ref("");

// 药品柜
const code = ref("");

// 类别
const categoryName = ref("");

// 科目
const subjectName = ref("");

// 项目
const projectName = ref("");

// 下载Excel表格的事件
const exportExcelFunc = async () => {
  let data = {
    labAddress: labAddress.value,
    code: code.value,
    categoryName: categoryName.value,
    subjectName: subjectName.value,
    projectName: projectName.value
  };
  console.log("导出提交数据", data);

  await exportExcelApi(data)
    .then(res => {
      console.log(res);
      FileSaver.saveAs(res, "货品导出数据.xlsx");
      showToast("导出成功,等待下载!");
      router.back();
    })
    .catch(err => {
      showToast("导出失败!");
    });
};

// 返回点击事件
const returnClick = () => {
  router.back();
};

// 类别选择器确定事件
const categoryPickerConfirm = ({ selectedOptions }) => {
  categoryName.value = selectedOptions[0]?.text;
  // goodsStore.mobileEditGoodsInfo.categoryName = selectedOptions[0]?.value;
  isShowCategoryPicker.value = false;
  // console.log(goodsStore.mobileEditGoodsInfo.categoryName);
};

// 实验室地址选择器确定事件
const labAddressPickerConfirm = ({ selectedOptions }) => {
  labAddress.value = selectedOptions[0]?.text;
  // goodsStore.mobileEditGoodsInfo.labId = selectedOptions[0]?.value;
  isShowLabAddressPicker.value = false;
  // console.log(goodsStore.mobileEditGoodsInfo.labAddress);
};

// 查询类别列表的函数
const selectCategoryListFunc = async () => {
  await selectCategoryListApi().then(res => {
    console.table(res.data);
    categoryColumns.value = res.data.map(item => {
      return {
        text: item.name,
        value: item.name
      };
    });
  });
};

// 查询实验室列表的函数
const selectLaboratoryListFunc = async () => {
  await selectLaboratoryListApi().then(res => {
    labAddressColumns.value = res.data.map(item => {
      return {
        text: item.address,
        value: item.id
      };
    });
  });
};

onMounted(() => {
  selectCategoryListFunc();
  selectLaboratoryListFunc();
});
</script>

<style lang="scss" scoped>
.export_goods_excel_mobile_wrap {
  width: 100vw;
  background-color: #f5f5f5;
  .nav_box {
  }
  .export_table_form_box {
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 46px);
    padding: 10px;
    .form_box {
      overflow: hidden;
      border-radius: 8px;
    }
    .action_btn_box {
      margin-top: 80px;
      .export_btn {
        width: 100%;
      }
    }
  }
}
:deep(.van-button) {
  letter-spacing: 6px;
  background: linear-gradient(160.78deg, rgb(29 178 255 / 100%) 0%, rgb(4 123 255 / 100%) 100%);
  border: none;
  border-radius: 55px;
  .van-button__content {
    position: relative;
    left: 2px;
  }
}
</style>
